<template>
  <div class="home">
    <img class="loading" v-show="loading" src="../../assets/img/5.gif" alt>
    <home-head></home-head>
    <home-banner :banner="banner"></home-banner>
    <home-icons :icons="icons"></home-icons>
    <div class="title">热销推荐</div>
    <recommend :recommendList="recommendList"></recommend>
    <div class="title">周末去哪儿</div>
    <weekend :weekendList="weekendList"></weekend>
  </div>
</template>
<script>
import HomeHead from "./components/head";
import HomeBanner from "./components/banner";
import HomeIcons from "./components/Icons";
import Recommend from "./components/recommend";
import Weekend from "./components/weekend";
import { HomeModel } from "../../models/HomeModel";
const homeModel = new HomeModel();

export default {
  name: "home",
  components: {
    HomeHead,
    HomeBanner,
    HomeIcons,
    Recommend,
    Weekend
  },
  data() {
    return {
      banner: [],
      icons: [],
      recommendList: [],
      weekendList: [],
      loading: ""
    };
  },
  computed: {
    city() {
      return this.$store.state.city;
    }
  },
  watch: {
    city() {
      homeModel.getHomePage(this.city).then(res => {
        this.handleData(res);
      });
    }
  },
  beforeMount() {
    this.loading = true;
  },
  mounted() {
    homeModel.getHomePage(this.city).then(res => {
      this.handleData(res);
    });
  },
  methods: {
    handleData(res) {
      var { banner, icons, recommendList, weekendList } = res.data.data;
      this.banner = banner;
      this.icons = icons;
      this.recommendList = recommendList;
      this.weekendList = weekendList;
      this.loading = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  padding: 10px;
  background: #eee;
}
.loading {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
</style>


